<template>
  <div id="sales-all-order">
    <div class="search-box">
      <el-form>
        <el-form-item label="订单号：">
          <el-input placeholder="请输入订单号" v-model="searchForm.orderNum" size="small" clearable></el-input>
        </el-form-item>

        <el-form-item label="任务编号：">
          <el-input placeholder="请输入任务编号" v-model="searchForm.taskCode" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="淘宝名：">
          <el-input placeholder="请输入淘宝名" v-model="searchForm.tbName" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="申诉编号：">
          <el-input placeholder="请输入申诉编号" v-model="searchForm.appealCode" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建时间 ：">
          <el-date-picker
            v-model="searchForm.createTime"
            type="datetime" size="small"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="search-btn" icon="el-icon-ali-search" @click="searchData">查&nbsp;询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="reset-btn" icon="el-icon-ali-reset" @click="resetSearchParam">重&nbsp;置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <el-table border :data="tableData" max-height="580px">
        <el-table-column prop="task_code" label="任务编码"></el-table-column>
        <el-table-column prop="create_time" label="提交时间"></el-table-column>
        <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
        <el-table-column prop="type_name" label="用户类型" ></el-table-column>
        <el-table-column prop="order_num" label="订单号" :formatter="getOrderNum"></el-table-column>
        <el-table-column prop="tb_name" label="做单账号" ></el-table-column>
        <el-table-column prop="remark" label="备注信息"></el-table-column>
        <el-table-column prop="status" label="任务状态" :formatter="getStatusName"></el-table-column>
        <el-table-column prop="content" label="申诉信息"></el-table-column>
        <el-table-column prop="treat_content" label="处置建议" ></el-table-column>
        <el-table-column prop="appeal_why" label="申诉原因" ></el-table-column>
        <el-table-column prop="appeal_result" label="申诉结果" ></el-table-column>
        <el-table-column prop="merchant_push_phone" label="商户或推手账号" ></el-table-column>
        <el-table-column prop="treat_time" label="处理时间" ></el-table-column>
        <el-table-column prop="over_time" label="完结时间" ></el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="100"
          class-name=""
        >
          <div slot-scope="scope">
            <el-button
              class="appeal-btn"
              v-if="scope.row.status == 1 || scope.row.status == 2"
              size="mini"
              @click="handleAppealAssessInfo(scope.row)"
            >处理</el-button
            >
            <div v-else>{{ scope.row.status == 3 ? "处理完成" : "" }}</div>
          </div>
        </el-table-column>
      </el-table>

      <div class="table-footer">
        <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="searchForm.limit" :current-page="searchForm.page" layout="total, sizes, prev, pager, next, jumper"
                       :total="pageTotal" @size-change="handleLimitChange" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
    <el-dialog title="申诉工单详情信息" :visible.sync="appealAssessVisible" @closed="close">
      <el-form :model="form">
        <el-form-item label="申诉编码" :label-width="formLabelWidth">
          <el-input v-model="form.appeal_code" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="任务编码" :label-width="formLabelWidth">
          <el-input v-model="form.task_code" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户类型" :label-width="formLabelWidth">
          <el-input v-model="form.type_name" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="申诉原因" :label-width="formLabelWidth">
          <el-input v-model="form.appeal_why" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="申诉结果" :label-width="formLabelWidth">
          <el-input v-model="form.appeal_result" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="推手凭证图" :label-width="formLabelWidth">
          <div class="block" v-for="img in form.proofImgUrls" :key="img">
            <el-popover
              placement="top-start"
              width="400"
              height="400"
              trigger="hover" >
              <el-image
                style="width: 400px; height: 400px;"
                :src="img"
                fit="cover"></el-image>
              <el-image
                style="width: 100px; height: 100px;"
                :src="img"
                fit="cover" slot="reference"></el-image>
            </el-popover>
          </div>
        </el-form-item>
        <el-form-item label="申诉结果图片" :label-width="formLabelWidth" v-if="closeFlag">
          <el-upload
            :action="BASE_API_URL+'baseapi/wechart/uploadMerchantPushImg'"
            list-type="picture-card"
            :multiple="true"
            :on-success="handlePictureCardSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { apiAppealTaskList, apiAppealTaskDue } from '../../request/api.js'

  export default{
    data(){
      return {
        searchForm:{
          token: '',
          page: 1,
          limit: 10,
          orderNum: '',
          taskCode: '',
          tbName: '',
          appealCode: '',
          createTime: ''
        },
        pageTotal: 0,
        tableData: [],
        appealAssessVisible: false,// 处理申诉模态框
        formLabelWidth: '120px',
        form: {},

        dialogImageUrl: '',
        dialogVisible: false,
        closeFlag: true
      }
    },
    created() {
      this.searchForm.token = window.localStorage.getItem('token')
      this.getTableData()
    },
    methods:{
      searchData(){
        this.searchForm.page = 1
        this.searchForm.limit = 10
        this.getTableData()
      },
      resetSearchParam(){
        this.searchForm = {
          token: this.searchForm.token,
          page: 1,
          limit: 10,
          orderNum: '',
          taskCode: '',
          tbName: '',
          appealCode: '',
          createTime: ''
        }
      },
      getTableData(){
        this.$isClick(true);
        apiAppealTaskList(this.searchForm).then(res =>{
          this.$isClick(false);
          if (res.code == 0){
            this.tableData = res.data
            this.pageTotal = res.count
          } else {
            this.$message.error(res.errmsg);
          }
        }).catch(res => {
          this.$isClick(false);
          this.$message.error(res.errmsg)
        })
      },
      getStatusName(row, column, cellValue, index) {
        if (cellValue == 1) return "待处理"
        if (cellValue == 2) return "正在处理"
      },
      getOrderNum(row, column, cellValue, index) {
        if (cellValue != "null") return cellValue
        return "订单号异常"
      },
      handleLimitChange(val) {
        this.searchForm.limit = val;
        this.getTableData()
      },
      handleCurrentChange(val) {
        this.searchForm.page = val;
        this.getTableData()
      },
      handleAppealAssessInfo(row) {
        this.closeFlag = true
        this.form = row
        this.form.token = this.searchForm.token
        this.form.appealResultImgUrl = []
        if (this.form.proof_img_url) {
          this.form.proofImgUrls = this.form.proof_img_url.split(",")
        }
        this.appealAssessVisible = true
      },
      submit() {
        let urls = this.form.appealResultImgUrl.join(",")
        apiAppealTaskDue({
          token: this.form.token,
          id: this.form.id,
          appeal_result: this.form.appeal_result,
          appeal_result_img_url: urls
        }).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.appealAssessVisible = false
            this.getTableData()
          } else {
            this.$message.error(res.errmsg)
          }
        }).catch(res => {
          console.log(res)
        })
      },
      close() {
        this.closeFlag = false
        this.appealAssessVisible = false
      },
      // 删除图片
      handleRemove(file, fileList) {
        let index = this.form.appealResultImgUrl.findIndex((value ,index, arr) => {
          return value == file.response.msg
        })
        this.form.appealResultImgUrl.splice(index, 1)
        // console.log(this.form)
      },
      // 填充图片
      handlePictureCardSuccess(response, file, fileList) {
        if (response.code == 1) {
          let index = this.form.appealResultImgUrl.length
          this.form.appealResultImgUrl[index] = response.msg
          this.dialogImageUrl = response.msg;
        }
        console.log(this.dialogImageUrl)
        // console.log(this.form)
      },
      // 预览图片
      handlePictureCardPreview(file) {
        // console.log(file.response.msg)
        if (file.response.code == 1) {
          // this.dialogImageUrl = file.response.msg;
          this.dialogVisible = true;
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .table-box .table-footer {
    justify-content: right;
  }
  .block {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
  }
</style>
